<template>
	<view class="buy-member">
		<view>
			<view class="section" v-if="list.recharge.length > 0">
				<view class="top">
					<view class="title"><text>充值会员，无限畅洗</text></view>
					<view class="tips"><text>智助洗车、智动洗车通用</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.recharge" :key="item.id"
						@click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c img-text" style="color: #685712;padding-left: 10rpx;" v-if="item.selfServiceCarWashGitCardList">
							<view><text style="font-size: 28rpx;font-weight: bold;">{{item.card_Cost}}</text><text>元</text>
							</view>
							<view class="scale" style="font-size: 18rpx;line-height: 30rpx;width: 260rpx;" v-for="(item2,index2) in item.selfServiceCarWashGitCardList" :key='index2'>
								<view>({{item2.coupon_Name}}x{{item2.limit_Times}})</view>
							</view>
						</view>
						<view class="flex img-text flex-jc-c flex-ai-c" style="color: #685712;padding-bottom: 10rpx;" v-else>
							<view>
								<text style="font-size: 28rpx;font-weight: bold;">{{item.card_Cost}}</text><text>元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="section" v-if="list.speedMonth.length > 0">
				<view class="top">
					<view class="title"><text>天天免费洗</text></view>
					<view class="tips"><text>适合经常洗车用户。</text></view>
				</view>
				<view class="welfare-list" v-for="(item,index) in list.speedMonth" :key='item.id'>
					<view class="flex">
						<view class="welfare-img">
							<image :src="item.pic_URL" v-if="item.pic_URL"></image>
						</view>
						<view class="welfare-text flex flex-dir-c flex-jc-sb">
							<view style="font-weight: bold;font-size: 28rpx;">{{item.coupon_Name}}</view>
							<view class="scale flex"
								style="font-size: 24rpx;line-height: 30rpx;position: relative;color: #999999;"
								v-for="(item2,index2) in item.selfServiceCarWashGitCardList" :key='index2'>
								<view style="position: relative;">赠送:{{item2.coupon_Name}}</view>
								<view style="position: absolute;right: -100rpx;">x{{item2.limit_Times}}</view>
							</view>
							<!-- footer -->
							<view class="welfare-footer">
								<view class="flex flex-ai-c flex-jc-sb">
									<view class="flex">
										<view style="color: #999999;font-size: 24rpx;">原价：</view>
										<view> <text
												style="text-decoration: line-through;color: #999999;margin-right: 10rpx;">￥{{item.normal_Price}}</text><text
												style="color: #ED6A17;font-weight: bold;">￥{{item.sale_Price}}</text></view>
									</view>
						
									<view class="welfare-footer-btn" @click="goDetails(item)">手慢无</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="top" style="padding: 30rpx 30rpx 0rpx 30rpx;" v-if="list.speed.length > 0||list.standard.length > 0||list.delicate.length > 0">
				<view class="title"><text>次卡会员，洗一次扣一次</text></view>
				<view class="tips"><text>适合不定期洗车用户。</text></view>
			</view>
			<view class="auto" v-if="list.speed.length > 0">
				<view class="top">
					<view class="title"><text>急速快洗</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.speed" :key="item.id"
						@click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c flex-ai-fe flex-jc-c img-text" style="padding-right: 10rpx;">
							<view class="name" style="color: #2F2F2F;font-size: 24rpx;">
								{{item.coupon_Name | cutString(15)}}
							</view>
							<view style="color: #fff;width: 100%;font-size: 20rpx;text-align: right;">￥
								<text
									style="text-decoration: line-through;margin-right: 10rpx;">{{item.normal_Price}}</text>
								<text
									style="font-size: 24rpx;font-weight: bold;color: #F30000;font-weight: bold;">￥{{item.sale_Price}}</text>
			
							</view>
							<view class="scale term">有效期{{item.use_Aging | aging}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="auto" v-if="list.standard.length > 0">
				<view class="top">
					<view class="title"><text>标准普洗</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.standard" :key="item.id"
						@click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c flex-ai-fe flex-jc-c img-text" style="padding-right: 10rpx;">
							<view class="name" style="color: #2F2F2F;font-size: 24rpx;">
								{{item.coupon_Name | cutString(15)}}
							</view>
							<view style="color: #fff;width: 100%;font-size: 20rpx;text-align: right;">￥
								<text
									style="text-decoration: line-through;margin-right: 10rpx;">{{item.normal_Price}}</text>
								<text
									style="font-size: 24rpx;font-weight: bold;color: #F30000;font-weight: bold;">￥{{item.sale_Price}}</text>
			
							</view>
							<view class="scale term">有效期{{item.use_Aging | aging}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="auto" v-if="list.delicate.length > 0">
				<view class="top">
					<view class="title"><text>水蜡精洗</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.delicate" :key="item.id"
						@click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c flex-ai-fe flex-jc-c img-text" style="padding-right: 10rpx;">
							<view class="name" style="color: #2F2F2F;font-size: 24rpx;">
								{{item.coupon_Name | cutString(15)}}
							</view>
							<view style="color: #fff;width: 100%;font-size: 20rpx;text-align: right;">￥
								<text
									style="text-decoration: line-through;margin-right: 10rpx;">{{item.normal_Price}}</text>
								<text
									style="font-size: 24rpx;font-weight: bold;color: #F30000;font-weight: bold;">￥{{item.sale_Price}}</text>
			
							</view>
							<view class="scale term">有效期{{item.use_Aging | aging}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 70vh;" v-if="emptyShow">
			<u-empty mode="coupon"></u-empty>
		</view>
		
		<view class="section"  v-else>
			<view class="top">
				<view class="title"><text>会员特权</text></view>
			</view>
			<view class="list-privilege">
				<view class="item">
					<view class="icon-box">
						<image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_1.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>全国洗车点通用</text></view>
						<view class="desc"><text>大平台有保障，一次购买，全国通用。</text></view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box">
						<image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_2.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>机器故障保险</text></view>
						<view class="desc"><text>如果遇到机器故障无法洗车，则无条件补偿当次消耗。</text></view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box">
						<image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_3.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>保养/美容/维修尽享折扣</text></view>
						<view class="desc"><text>官方不定期将有好礼券相送享受保养/美容/维修等减免。</text></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			machineId: {
				trpe: String,
				default: ''
			},
			list:{
				type:[Array,Object],
				default:()=>{}
			},
			emptyShow:{
				type:Boolean,
				default:false,
			}
		},
		computed: {
			purchaseChannel() {
				return this.$store.state.purchaseChannel
			},
			amount() {
				let price = 0
				if (this.current) {
					if (this.couponInfo) {
						price = Number(this.current.sale_Price) - this.couponInfo.couponAllMoney
					} else {
						price = Number(this.current.sale_Price)
					}
				} else {
					price = 0
				}
				return parseFloat(price).toFixed(2)
			}
		},
		
		data() {
			return {
				
			}
		},
		filters: {
			aging(val){
				let num
				if(val%365===0){
					num = val/365+'年'
				}else if(val%366===0){
					num = val/366+'年'
				}else if(val<30){
					num = val+'天'
				}else{
					num = Math.floor(val/30)+'个月'
				}
				return num
			},
			cutString(str, len) {
				if (str.length * 2 <= len) {
					return str
				}
				let strlen = 0
				let s = ''
				for (let i = 0; i < str.length; i++) {
					s = s + str.charAt(i)
					if (str.charCodeAt(i) > 128) {
						strlen = strlen + 2
						if (strlen >= len) {
							return s.substring(0, s.length - 1) + '...'
						}
					} else {
						strlen = strlen + 1
						if (strlen >= len) {
							return s.substring(0, s.length - 2) + '...'
						}
					}
				}
				return s
			},
		},
		created() {
			console.log(this.emptyShow)
		},
		methods: {
			onClickItem(item) {
				this.$emit('click', item)
			},
		}
	}
</script>

<style lang="scss">
	//#ifdef H5
	.term {
		font-size: 18rpx;
		color: #666666;
		position: relative;
		left: 30rpx;
	}
	
	.scale {
		transform: scale(0.8);
		transform-origin: 0 0;
	}
	
	//#endif
	/* /列表 */
	.welfare-list {
		// margin-bottom: 40rpx;
		margin-top: 20rpx;
	
		.welfare-img {
			width: 260rpx;
			height: 173rpx;
			background-color: #FEDD58;
			border-radius: 10rpx;
			image {
				box-shadow: 0px 0rpx 10px 0px rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
				
				// border: 2rpx solid red;
			}
		}
	
		.welfare-text {
			width: 60%;
			margin-left: 20rpx;
		}
	
		.welfare-footer {
			/* width: 373rpx; */
	
			&-btn {
				width: 120rpx;
				height: 54rpx;
				background: linear-gradient(0deg, #FBD220, #FFE23E);
				border-radius: 27rpx;
				text-align: center;
				line-height: 54rpx;
				font-size: 24rpx;
				// margin-left: 20rpx;
			}
		}
	}
	
	.img-text {
		margin-top: 10rpx;
		position: absolute;
		z-index: 1;
		line-height: 40rpx;
		width: 100%;
		height: 100%;
	}
	
	.img-text-2 {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		padding-left: 10rpx;
		top: 0rpx;
		line-height: 35rpx;
		margin-top: 5rpx;
	}
	
	.sale-price {
		font-weight: bold;
		color: #685712;
	}
	
	.name {
		font-size: 26px;
		font-weight: bold;
		color: #2F2F2F;
		text-shadow: 3rpx 2rpx 4rpx rgba(47, 47, 47, 0.5);
	}
	
	.free-cost {
		color: rgb(255, 106, 105);
		font-weight: lighter;
		font-size: 24rpx;
	}
	
	.section {
		background-color: #fff;
		margin-bottom: 16rpx;
		padding: 30rpx;
	}
	.auto{
		background-color: #fff;
		margin-bottom: 16rpx;
		padding: 0 30rpx;
	}
	.buy-member {
	
		.top {
			margin-bottom: 20rpx;
			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
	
			.tips {
				font-size: 20rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
	
		.list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: -30rpx;
	
			.item {
				width: 212rpx;
				height: 140rpx;
				border-radius: 10rpx;
				background-color: #FEDD58;
				margin: 0rpx 0 28rpx 28rpx;
				overflow: hidden;
	
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	
		.list-privilege {
			margin-top: 10rpx;
	
			.item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
	
				.icon-box {
					width: 60rpx;
					height: 60rpx;
	
					.img {
						width: 60rpx;
						height: 60rpx;
					}
				}
	
				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 16rpx;
					flex: 1;
	
					.title {
						font-size: 24rpx;
						color: #333;
					}
	
					.desc {
						font-size: 20rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
